<template>
	<view class="search-page">
		<!-- 搜索框 -->
		<view class="search-bar">
			<uni-search-bar placeholder="搜索" bgColor="#EEEEEE" @confirm="search" />
		</view>
		<!-- 历史记录 -->
		<view class="history-section" v-if="historyRecords.length > 0">
			<text class="history-title">历史记录: </text>
			<text class="history-item" v-for="(record,index) in historyRecords" :key="index"
				@click="goToSearch(record)">
				{{record}}
			</text>
		</view>
		<!-- 门店列表 -->
		<view class="shops-list">
			<view class="shop-item" v-for="(shop,index) in shops" :key="index" @click="goToShopDetails(shop)">
				<view class="shop-left">
					<image class="shop-img" :src="shop.img" mode="widthFix"></image>
				</view>
				<view class="shop-right">
					<text class="shop-name">{{shop.name}}</text>
					<view class="shop-rating">
						<uni-rate size="20" v-model="shop.score" :readonly="true" />
						<text class="score">{{shop.score}} 分</text>
						<text class="sales">销量: {{shop.sales}}</text>
					</view>
					<text class="distance">{{shop.distance}}</text>
					<text class="business-hours">营业时间: {{shop.businessHours}}</text>
					<text class="location">地址: {{shop.location}}</text>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				historyRecords: [
					"飞飞汽车美容店",
					"飞飞汽修美容店",
					"汽车美容店",
					"汽修美容店",
				],
				shops: [{
						name: "车百事汽车生活馆",
						img: "/static/vehicle_repair/nearbyStore/shop.png",
						score: 4,
						sales: 556,
						distance: "556m",
						businessHours: "周一至周五 早上8:00-晚上22:00",
						location: "山阳区人民路与解放路交叉口",
					},
					{
						name: "车百事汽车生活馆",
						img: "/static/vehicle_repair/nearbyStore/shop.png",
						score: 4,
						sales: 556,
						distance: "556m",
						businessHours: "周一至周五 早上8:00-晚上22:00",
						location: "山阳区人民路与解放路交叉口",
					},
				],
			}
		},
		methods: {
			search(){
				console.log("点击了搜索搜索内容: ",this.searchValue);
			},
			 goToSearch(record) {
				 console.log("根据历史记录搜索");
			      // 点击历史记录进行搜索的逻辑
			      this.searchValue = record;
			      this.search();
			    },
				goToShopDetails(shop){
					console.log("跳转到店铺详情页面");
					uni.navigateTo({
						url:'/pages/vehicle_repair/storeDetails/storeDetails'
						
					})
				}
		}
	}
</script>

<style>
.search-page{
	padding: 20rpx;
}
.search-bar{
	margin-bottom: 20rpx;
	border-radius: 8rpx;
	margin-top: 10rpx;
}
.history-section{
	margin-bottom: 30rpx;
}
.history-title{
	font-size: 30rpx;
	margin-right: 20rpx;
	
}
.history-item{
	font-size: 28rpx;
	margin-right: 24rpx;
	color: #666;
}
.shops-list{
	margin-top: 20rpx;
}
.shop-item{
	display: flex;
	margin-bottom: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 2rpx solid #eee;
}
.shop-left{
	margin-right: 20rpx;
	display: flex;
}
.shop-img{
	display: flex;
	margin-top: 20rpx;
	width: 220rpx;
	height: 220rpx;
}
.shop-right{
	flex: 1;
}
.shop-name{
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}
.score, .sales{
	font-size: 24rpx;
	margin-left: 20rpx;
}
.distance{
	display: flex;
	font-size: 32rpx;
	color: deepskyblue;
	float: right;
	margin-top: -100rpx;
}
.business-hours,.location{
	font-size: 24rpx;
	margin-top: 6rpx;
	display: block;
}
</style>